<template>
  <!-- 专网数据同步 -->
  <h-modal
    class="event-modal"
    v-model="show"
    width="1200px"
    :title="`值班纪录`"
    @submit="submit"
    @cancel="cancel"
    hidenCancel>
    <a-form-model :model="form" size="large">
      <a-row :gutter="[0, 0]">
        <a-col :span="24">
          <div class="header-title">
            <a-space>
              <a-button type="primary" @click="pre"><a-icon type="left" /> 上一天</a-button>
              <a-button type="primary" @click="next">下一天 <a-icon type="right" /></a-button>
            </a-space>
            <span class="header-title-time">{{ time }}</span>
            <div>
              <a-space>
                <a-button type="primary" @click="synchronizationBeOnDuty"><a-icon type="redo"></a-icon> 同步交接班记录</a-button>
                <a-button type="primary" @click="showNote = true"><a-icon type="plus"></a-icon> 添加交接班注意事项</a-button>
              </a-space>
            </div>

          </div>
        </a-col>
        <a-col :span="18">
          <div class="header-tab" :style="{width: isZw ? '264px' : '132px'}" v-if="isZw">
            <a-radio-group v-model="type" @change="changeTab" class="header-tab-radio" size="large" button-style="solid">
              <a-radio-button value="1">交接班注意事项</a-radio-button>
              <a-radio-button value="2" >值班记录</a-radio-button>
            </a-radio-group>
          </div>

        </a-col>
        <!-- <a-col v-if="!isZw" :span="6" style="margin-top: 12px">
          <a-input-search v-model="title" placeholder="请输入标题搜索" enter-button @search="reset(activeKey)"></a-input-search>
        </a-col> -->
        <a-col :span="24" v-if="type == 1">
          <h-table
            ref="htable"
            @init="getBeOnDutyNote()"
            :config="configNote"
            :showHeadBgNone="false"
            :zebraStripes="false"
            v-if="reload">
            <div slot="img" slot-scope="{text, record}" style="display:flex">
              <viewer :images="[record.img]" v-if="text" >
                <img :src="text" width="90px" height="90px" style="object-fit: cover" alt="">
              </viewer>
              <div v-else>
                无图片
              </div>
              {{record.link}}
            </div>
            <template slot="enclosure" slot-scope="{text}">
              <span v-for="(items, j) in fileFormat(text)" :key="j">
                <a-tooltip :title="items.url">
                  <a style="font-size: 30px" :href="items.url" target="_blank">
                    <SvgIcon v-if="items.type == 'pdf'" iconClass="pdf" />
                    <SvgIcon v-else-if="items.type.includes('doc')" iconClass="word" />
                    <SvgIcon v-else-if="['png', 'jpg', 'jpeg', 'gif'].includes(items.type)" iconClass="image" />
                    <SvgIcon v-else iconClass="file" />
                  </a>
                </a-tooltip>
              </span>
            </template>
          </h-table>
        </a-col>
        <a-col :span="24" v-if="type == 2">
          <a-tabs size="large" v-model="activeKey">
            <a-tab-pane v-for="(item, i) in tab" :key="item.id" :tab="item.name">
              <h-table
                ref="htable"
                @init="getList(i, item.id)"
                :config="config[i]"
                :showHeadBgNone="false"
                :zebraStripes="false"
                v-if="reload">
                <template slot="depart" slot-scope="{record}">
                  {{ record.depart }} {{ record.area }}
                </template>
                <template slot="textLink" slot-scope="{text}">
                  <span v-html="formatLink(text)"></span>
                </template>

              </h-table>
            </a-tab-pane>
          </a-tabs>
        </a-col>
      </a-row>

    </a-form-model>

    <a-modal v-model="showNote" :title="`交接班注意事项（${moment(formNote.recordDate).format('YYYY-MM-DD')}）`" :maskClosable="false" @ok="submits">
      <a-form-model ref="ruleForm" :model="formNote" :rules="rules" size="large">
        <a-row :gutter="0">
          <a-col :span="24">
            <a-form-model-item label="创建人" prop="createBy">
              <a-input v-model="formNote.createBy"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="注意事项" prop="note">
              <a-textarea v-model="formNote.note" :rows="5"></a-textarea>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="附件" prop="enclosure">
              <UploadImageMutil type="drag" v-if="reload" ref="image" :url="formNote.enclosure" @getUrl="getImg" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>

    </a-modal></h-modal>
</template>

<script>
import moment from 'moment';
import { everDetail, getBeOnDutyNote, addBeOnDutynew, synchronizationBeOnDuty } from '@/api/serve';
import { getHandoverData, getBeOnDuty } from '@/api/dutyTime';
// eslint-disable-next-line no-unused-vars
import { columns, api } from '../data/report';
import Swiper from 'swiper';
import UploadImageMutil from '@/components/UploadImageMutil';
import SvgIcon from '@/components/SvgIcon';
import { mapState } from 'vuex';
// import { getBeOnDuty } from '@/api/dutyTime';
// let dateInt = '';

export default {
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    reportTime: {
      default: '',
      type: String
    }
  },
  model: {
    prop: 'showModal',
    event: 'update:showModal'
  },
  filters: {

  },
  components: {
    UploadImageMutil,
    SvgIcon
  },
  watch: {
    showModal: {
      handler(val) {
        this.show = val;
        if (val) {
          this.time = this.reportTime;
          this.formNote.recordDate = moment(this.time).format('YYYY-MM-DD HH:mm:ss');
          this.formNote.createBy = this.userInfo.realName;
          this.reload = true;
          this.getBeOnDutyNote(this.reportTime);
          for (let i = 0; i < 5; i++) {
            this.config.push({
              rowKey: 'id',
              dataSource: [],
              columns: [
                {
                  align: 'center',
                  title: '模块',
                  dataIndex: 'name'
                },
                {
                  align: 'center',
                  title: '最后一次同步时间',
                  dataIndex: 'time'
                }
              ],
              pagination: false,
              scroll: {
                y: 240
              }
            });
          }

          getBeOnDuty().then(res => {
            this.tab = res.data;
            this.activeKey = this.tab[0].id;
          });
        } else {
          this.config = [];
        }
      },
      immediate: true
    },
    show(val) {
      this.$emit('update:showModal', val);
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    }),
    formatLink() {
      return function(e) {
        const m = e.match('(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]');
        if (m) {
          e = encodeURIComponent(e).replace(new RegExp(encodeURIComponent(m[0]), 'g'), `<a target="_blank" href="${m[0]}">${m[0]}</a>`);
        }
        return decodeURIComponent(e);
      };
    },
    fileFormat() {
      return function(file) {
        if (!file) return [];
        const list = file.split(',');
        return list.map(e => {
          const index = e.lastIndexOf('.');
          return {
            type: e.substring(index + 1, e.length).toLowerCase(),
            url: e
          };
        });
      };
    }
  },
  data() {
    return {
      moment,

      activeKey: 0,
      nowDate: moment().format('YYYY-MM-DD'),
      showJj: false,
      show: false,
      reload: false,
      showNote: false,
      isZw: process.env.VUE_APP_TYPE == 2,
      form: {},
      time: '',
      title: '',
      tab: [
        '每日值班舆情及处置情况一览表',
        '网上舆情信息表',
        '网民热点关注表',
        '网上舆情晚报',
        '维稳会商表'
        // '浙江省每周地市网络舆情分险点报送表'
      ],
      id: [],
      config: [],
      notes: '',
      note: [],
      type: process.env.VUE_APP_TYPE == 2 ? '1' : '2',
      formNote: {
        createBy: '',
        enclosure: '',
        recordDate: moment().format('YYYY-MM-DD HH:mm:ss')
      },
      configNote: {
        rowKey: 'id',
        dataSource: [],
        columns: [
          {
            align: 'center',
            title: '序号',
            dataIndex: 'indexs'
            // scopedSlots: { customRender: 'indexs' }
          },
          {
            align: 'center',
            title: '添加人',
            dataIndex: 'createBy'
          },
          {
            align: 'center',
            title: '注意事项内容',
            dataIndex: 'note'
          },
          {
            align: 'center',
            title: '附件',
            dataIndex: 'enclosure',
            scopedSlots: { customRender: 'enclosure' }
          },
          {
            align: 'center',
            title: '日期',
            dataIndex: 'createTime'
          }
        ],
        pagination: false,
        scroll: {
          y: 280
        }
      },
      rules: {
        note: [{ required: true, message: '请输入' }],
        createBy: [{ required: true, message: '请输入' }]
      },
      rulesEdit: {
        name: [{ required: true, message: '请输入' }],
        dutyTime: [{ required: true, message: '请输入' }]
      }
    };
  },
  beforeDestory() {
    // clearInterval(dateInt);
  },
  created() {
    // this.formNote.recordDate = moment(this.time).format('YYYY-MM-DD HH:mm:ss');
    // dateInt = setInterval(() => {
    //   this.formNote.recordDate = moment().format('YYYY-MM-DD HH:mm:ss');
    // }, 1000);

  },
  methods: {
    getImg(url) {
      console.log(url);
      this.formNote.enclosure = url;
    },
    changeTab() {

    },
    getList(i, id) {
      this.reset(i, id);
    },
    synchronizationBeOnDuty() {
      synchronizationBeOnDuty({
        nowTime: this.time
      }).then(res => {
        this.$message.success('同步成功');
      });
    },
    getBeOnDutyNote(recordDate, title) {
      (this.isZw ? getHandoverData : getBeOnDutyNote)({
        recordDate: recordDate || this.time,
        time: recordDate || this.time
      }).then(res => {
        // this.note = res.data || [];
        this.configNote.dataSource = res.data.map((e, i) => {
          return {
            ...e,
            indexs: i + 1
          };
        });
        this.$nextTick(() => {
          this.swiperInit();
        });
      });
    },
    select(e) {
      console.log(e);
    },
    reset(i, id) {
      const c = columns[i];
      const url = '/web/DutyModule/selectDutyData';// api[i];
      // this.reload = false;
      this.config[i].columns = c;
      everDetail(url, {
        time: this.title ? undefined : this.time,
        title: this.title,
        dutyId: id
      }).then(res => {
        this.config[i].dataSource = res.data.map((e, i) => {
          return {
            ...e,
            order: i + 1
          };
        });
        // this.reload = true;
      });
    },
    submit() {
      this.reload = false;
      this.show = false;
    },
    submits() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          addBeOnDutynew(this.formNote).then(res => {
            this.$message.success('添加成功');
            this.refresh();
            this.showNote = false;
          });
        } else {

        }
      });
    },

    cancel() {
      this.reload = false;
    },
    refresh() {
      this.reload = false;
      this.showNote = false;
      this.$nextTick(() => {
        this.reload = true;
        // this.showNote = true;
      });
      this.getBeOnDutyNote(this.time);
    },
    pre() {
      this.time = moment(this.time).subtract(1, 'day').format('YYYY-MM-DD');
      console.log(this.time);
      this.formNote.recordDate = moment(this.time).format('YYYY-MM-DD HH:mm:ss');
      this.refresh();
    },
    next() {
      this.time = moment(this.time).add(1, 'day').format('YYYY-MM-DD');
      this.formNote.recordDate = moment(this.time).format('YYYY-MM-DD HH:mm:ss');
      this.refresh();
    },
    swiperInit() {
      // eslint-disable-next-line no-unused-vars
      const mySwiper = new Swiper('.swiper', {
        direction: 'vertical',
        loop: true,
        autoplay: {
          disableOnInteraction: false
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
  .swiper {
    height: 37px !important;
  }
  .header-title {
    display: flex;
    justify-content: space-between;
    position: relative;
    span {
      font-weight: bold;
      font-size: 18px;
    }
    .header-title-time{
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0);
    }
  }

</style>
<style lang="less">
.event-modal {
  .header-tab {
    width: 264px;
    height: 44px;
    background: #E2EAFF;
    border-radius: 80px;
    margin-top: 12px;
  }
.header-tab-radio {
    display: block;
    margin: 0 auto;
    // width: 118px;
    height: 30px;
    text-align: center;
    // background: #1F3B8A;
    // border-radius: 10px;
    .ant-radio-button-wrapper-checked {
      background: #1F3B8A !important;
      border-color: #1F3B8A !important;
      border-radius: 10px;
      color: #fff !important;
    }
    .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within {
      box-shadow: 0 0 0 3px rgba(31, 59, 138, 0.08) !important;
    }
    .ant-radio-button-wrapper {
      border-radius: 10px;
      // width: 120px;
      height: 30px;
      line-height: 28px;
      text-align: center;
      margin-top: 7px;
      background: none;
      color: #333;
      border-color: transparent;
      transition: none;
      border-radius: 100px;
      &:first-child {
        margin-right: 8px;
      }
    }
    .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
      background-color: transparent;
    }
    .ant-radio-button-wrapper:not(:first-child)::before {
      background: none;
    }
  }
  }
</style>
